import { Layout, Menu, Breadcrumb,Button,Divider} from 'antd';
import { PoweroffOutlined } from '@ant-design/icons';

import Mymenu from './compontents/Menu';
import { useState } from 'react';
import "./style.less"
import { useHistory } from 'umi';
const { Header, Content, Footer, Sider } = Layout;
const { SubMenu } = Menu;
const Home =(props:any)=>{
    const history=useHistory()
    const [collapsed,setcollapsed] =useState(false)
    const onCollapse =()=>{
        setcollapsed(!collapsed)
    }
    //跳转到登录页面
    const gotoLogin=()=>{
      history.push('/login')
    }
    return (
        <>
   <Layout style={{ minHeight: '100vh' }}>
        <Sider collapsible collapsed={collapsed} onCollapse={onCollapse}>
          
          <div className="logo" />
        <Mymenu/>
        </Sider>
        <Layout className="site-layout">
          <Header className="site-layout-background" style={{ padding: 0 }} >
            <div className="header-span">欢迎你</div>
            <div className="header-span">钟璇</div>
            <Button type="primary"  onClick={gotoLogin} >退出</Button>
            </Header>

          <Content style={{ margin: '0 16px' }}>
            <Breadcrumb style={{ margin: '16px 0' }}>
              {/* <Breadcrumb.Item>User</Breadcrumb.Item>
              <Breadcrumb.Item>Bill</Breadcrumb.Item> */}
            </Breadcrumb>
            <div className="site-layout-background" style={{ padding: 24, minHeight: 360 }}>
              {/* Bill is a cat.
               */}
               {props.children}
            </div>
          </Content>
          <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
        </Layout>
      </Layout>
        </>
    )
}
export default Home